import React from "react";
import "./App.css";

class App extends React.Component {
	constructor(props) {
		super(props);
        this.state = {
            data:[]
        }
    }
	componentDidMount() {
		fetch("https://cnodejs.org/api/v1/topics")
        .then(res=>res.json())
        .then(res => {
            this.setState({data:res.data});//在compoenetDidMount中直接调用setState，将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前，所以即使render已经执行了两次，用户也看不到中间的渲染过程
        })
	}
    render() {
		return <ul className="content">
            {
                this.state.data.map((item) => 
                    <li key={item.id} className="list" onClick={()=>{this.props.showDetail(item.id)}}>
                        <img src={item.author.avatar_url} alt="头像"/>
                        <span className="reply">{item.reply_count}/</span>
                        <span className="visit">{item.visit_count}</span>
                        <p>{item.title}</p>
                    </li>
                )
            }
        </ul>
	}
}

export default App;